<template>
	<swiper pagination :modules="modules" class="carousel" 
		:style="{ height: height ? height + 'px' : '200px' }">
		<swiper-slide v-for="(v, i) in urls" :key="i">
			<img :src="v" alt="" style="width: 100%;">
		</swiper-slide>
	</swiper>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from 'swiper'
import 'swiper/css';
import 'swiper/css/pagination';
import { defineProps, ref } from 'vue'

const modules = ref([Pagination, Autoplay])
defineProps<{
	urls: string[]
	height?: number
	autoplay?: boolean
}>()
</script>

<style lang="scss" scoped>
.carousel {
	height: 200px;

	img {
		width: 100%;
		height: 100%
	}
}
</style>